<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath %>">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>客户管理</title>
	<link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css"
		  media="all">
	<script src="/resources/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['table', 'layer', 'jquery', 'form','laydate'], function () {
			let table = layui.table;
			let layer = layui.layer;
			let $ = layui.jquery;
			let form = layui.form;
			let laydate = layui.laydate;

			//请求查询条件的业务员
			$.post("/user/queryAllAvailableUser.do",function (res) {
				let data = res.data;
				console.log(data)
				if (data){
					let html="<option value=''>请选择业务员</option>";
					$.each(data,function (index, item) {
						html+="<option value='"+item.id+"'>"+item.realname+"</option>";
					})
					$("#userId").html(html);
					form.render("select");
				}
			})

			//表单渲染
			let customerTab = table.render({
				elem: "#customerTable",
				url: "/customer/list.do",
				title: "客户列表",
				page: true,
				cols: [ [
					{field: "checkboxaaa",type:"checkbox", align: "center"},
					{field: "id", title: "ID", align: "center"},
					{field: "name", title: "客户名", align: "center"},
					{field: "phone", title: "客户电话", align: "center"},
					{
						field: "sex", title: "性别", align: "center", templet: function (res) {
							if (res.sex === 1) {
								return "男";
							} else if (res.sex === 0) {
								return "女";
							}
							return "未知角色";
						}
					},
					{field: "company", title: "公司", align: "center"},
					{field: "realname", title: "所属业务员", align: "center",templet:function (res) {
							if (res.realname==null){
								return "<span style='text-decoration: line-through;color: orange'>暂无业务员</span>";
							}
							return res.realname;
						}},
					{field: "createTime", title: "創建時間", align: "center"},
					{field: "updateTime", title: "更新時間", align: "center"},
					{field: "deletedTime", title: "删除時間", align: "center"},
					{title: "操作", align: "center", toolbar: "#customerTableBar", width: 260}
				] ],
				toolbar: "#customerTableToolbar",
				done:function () {
					if ([[${session.user.role!=1}]]){
						$("#changeBtn").prop("style","display: none")
						$("#searchDiv").prop("style","display: none")
					}
				}
			})



			$("#resetSearch").click(function () {
				customerTab.reload({
					where:null
				});
			})

			//查询按钮绑定事件
			form.on("submit(doSearch)", function (obj) {
				let data = obj.field;
				customerTab.reload({
					where: data
				})
				return false;
			})

			//添加顶部按钮绑定事件
			table.on("toolbar(customerTable)", function (obj) {
				let event = obj.event;
				switch (event) {
					case "add":
						openAddLayer();
						break;
					case "changCustomer" :
						openChangeCustomerLayer();
						break;
				}

			})
			//添加行按钮绑定事件
			table.on("tool(customerTable)", function (obj) {
				let event = obj.event;
				let data = obj.data;
				switch (event) {
					case "update":
						openUpdateLayer(data);
						break;
					case "del":
						layer.confirm("确认删除客户["+data.name+"]吗?"
								,{icon:3,title:"提示"}, function () {
									$.post("/customer/delCustomer.do",{id:data.id}, function (res) {
										layer.msg(res.msg);
										if (res.code == 200) {
											customerTab.reload();
										}
									})
								})
						break;
					case "viewLog":
						openViewLogLayer(data);
						break;
				}
				return false;
			})
			let url;
			let mainIndex;

			function openAddLayer() {
				mainIndex = layer.open({
					type: 1,
					title: '添加客户',
					content: $("#addOrUpdateLayer"),
					closeBtn: 1,
					area: ['400px', '300px'],
					success: function () {
						$("#resetBtn").click()
						url = "/customer/addCustomer.do"
					}
				})
			}

			function openUpdateLayer(data) {
				mainIndex = layer.open({
					type: 1,
					title: '修改客户',
					content: $("#addOrUpdateLayer"),
					closeBtn: 1,
					area: ['400px', '300px'],
					success: function () {
						form.val("addOrUpdateFrm", data)
						url = "/customer/updateCustomer.do"
					}
				})
			}

			function openChangeCustomerLayer() {
				let status = table.checkStatus("customerTable");
				let data = status.data;
				if (data.length<1){
					layer.msg("请先选中要转移的客户");
					return;
				}
				$.post("/user/queryAllAvailableUser.do",function (res) {
					let data = res.data;
					if (data){
						let changHtml="";
						$.each(data,function (index, item) {
							changHtml+="<input class='layui-input' name='userId' type='radio' value='"+item.id+"' title='"+item.realname+"'/>"
						})
						$("#changDiv").html(changHtml);
						form.render("radio")
					}
				})

				mainIndex = layer.open({
					type: 1,
					title: '转移客户',
					content: $("#changeCustomerLayer"),
					closeBtn: 1,
					area: ['600px', '300px'],
					offset:'100px'
				})
			}


			let viewTable;
			function openViewLogLayer(data){
				mainIndex = layer.open({
					type:1,
					title:"客户-"+data.name+"的拜访记录",
					content:$("#viewLog"),
					closeBtn:1,
					area:['1100px','620px'],
					success:function () {
						laydate.render({
							elem:"#dateInput",
							type:"datetime",
							value:new Date(),
							isInitValue: true
						})
						form.val("visitLogFrm",{customerId:data.id,name:data.name})
						 viewTable = table.render({
							elem: "#viewTable",
							url: "/visitLog/visitLogList.do?customerId="+data.id,
							title:" 拜访记录",
							page: true,
							cols: [ [
								{field: "realname", title: "业务员", align: "center"},
								{field: "name", title: "客户姓名", align: "center"},
								{field: "descp", title: "内容", align: "center"},
								{field: "visitTime", title: "拜访时间", align: "center"},
								{field: "createTime", title: "创建时间", align: "center"},
							] ],
							limit:5,
							limits:[5,10],
							toolbar:true
						})
					}
				})
			}
			//监听转移客户提交事件
			form.on("submit(doChange)",function (obj) {
				let userId = obj.field.userId;
				if (userId){
					let status = table.checkStatus("customerTable");
					let data = status.data;
					let params="userId="+userId;
					$.each(data,function (index, item) {
						params+="&customerIds="+item.id
					})
					$.post("/customer/changeCustomerUser.do",params ,function (res) {
						layer.msg(res.msg);
						if (res.code==200){
							layer.close(mainIndex)
							customerTab.reload();
						}
					})
				}else {
					layer.msg("请先选择业务员")
				}
				return false;
			})

			//监听拜访记录添加提交事件
			form.on("submit(visitLogSubmit)", function (obj) {
				let field = obj.field;
				$.post("/visitLog/addVisitLog.do",field, function (res) {
					layer.msg(res.msg)
					if (res.code == 200) {
						viewTable.reload();
						$("#visitLogFrm")[0].reset();
					}
				});
				return false;
			})

			//监听客户添加与修改提交事件
			form.on("submit(doSubmit)", function (obj) {
				console.log(obj.field)
				$.post(url, obj.field, function (res) {
					layer.msg(res.msg)
					if (res.code == 200) {
						layer.close(mainIndex);
						customerTab.reload();
					}
				});
				return false;
			})
		})


	</script>
</head>
<body>

<blockquote class="layui-elem-quote">
	<form class="layui-form" id="searchFrm" lay-filter="searchFrm">
		<div class="layui-form-item">
			<div class="layui-inline" id="searchDiv">
				<label class="layui-form-label">业务员</label>
				<div class="layui-input-inline" >
					<select name="userId" id="userId">

					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户姓名</label>
				<div class="layui-input-inline">
					<input type="text" name="name" placeholder="请输入客户姓名" class="layui-input"/>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户电话</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" placeholder="请输入客户电话" class="layui-input"/>
				</div>
			</div>
			<div class="layui-inline">
				<button type="button"  class="layui-btn" lay-submit id="doSearch" lay-filter="doSearch">
					<i class="layui-icon layui-icon-search"></i>
					查询
				</button>
				<button id="resetSearch" type="reset"  class="layui-btn layui-btn-danger">
					<i class="layui-icon layui-icon-refresh-3"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</blockquote>

<div id="viewLog" style="display: none">
	<div class="layui-card">
		<form class="layui-form layui-form-pane" id="visitLogFrm" lay-filter="visitLogFrm">
			<div class="layui-form-item">
				<label class="layui-form-label">拜访时间:</label>
				<div class="layui-input-block">
					<input type="hidden" name="customerId">
					<input type="hidden" name="name">
					<input class="layui-input" readonly id="dateInput"  name="visitTime" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">拜访内容:</label>
				<div class="layui-input-block">
					<textarea name="descp" class="layui-textarea" lay-verify="required"></textarea>
				</div>
			</div>
			<div class="layui-form-item" align="center">
				<div style="width: 370px; margin-left: auto;margin-right: auto">
					<button type="button" class="layui-btn layui-btn-fluid" lay-submit id="visitLogSubmit" lay-filter="visitLogSubmit" value="保存">
						<i class="layui-icon layui-icon-release"></i>
						提交
					</button>
				</div>
			</div>
		</form>
	</div>
	<div class="layui-card">
		<table id="viewTable" lay-filter="viewTable"></table>
	</div>
</div>

<div id="changeCustomerLayer" style="display: none;">
	<form class="layui-form layui-form-pane" id="changeCustomerFrm" lay-filter="changeCustomerFrm">
		<div class="layui-form-item layui-form-text" style="text-align: center">
			<label class="layui-form-label layui-bg-gray" style="text-align: center">选择业务员</label>
			<div class="layui-input-block" id="changDiv">

			</div>
		</div>
		<div class="layui-input-item " style="margin-top: 120px">
			<div style="width: 370px; margin-left: auto;margin-right: auto">
				<button type="button"  class="layui-btn layui-btn-fluid" lay-submit id="doChange" lay-filter="doChange">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
			</div>
		</div>
	</form>
</div>
<div id="addOrUpdateLayer" style="display: none;margin-right: 5px">
	<form class="layui-form layui-form-pane" id="addOrUpdateFrm" lay-filter="addOrUpdateFrm">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">客户姓名:</label>
				<div class="layui-input-inline">
					<input type="hidden" name="id">
					<input type="text" name="name" placeholder="请输入客户姓名" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户电话:</label>
				<div class="layui-input-inline">
					<input type="text" name="phone" placeholder="请输入客户电话" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">客户公司:</label>
				<div class="layui-input-inline">
					<input type="text" name="company" placeholder="请输入客户公司" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">性别:</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" checked value="1" title="男">
					<input type="radio" name="sex"  value="0" title="女">
				</div>
			</div>
			<div class="layui-input-item" style="text-align: center;margin-top: 20px">
				<input type="button" value="提交" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
				<input type="reset" id="resetBtn" value="重置" class="layui-btn layui-btn-danger">
			</div>
		</div>
	</form>
</div>

<div>
	<table id="customerTable" class="layui-hide" lay-filter="customerTable"></table>
	<script type="text/html" id="customerTableToolbar">
		<button class="layui-btn layui-btn-sm" lay-event="add">
			<i class="layui-icon layui-icon-addition"></i>添加</button>
		<button id="changeBtn"  class="layui-btn layui-btn-sm layui-btn-warm" lay-event="changCustomer">
			<i class="layui-icon layui-icon-more"></i>转移客户</button>
	</script>
	<script type="text/html" id="customerTableBar">
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="update">
			<i class="layui-icon layui-icon-edit"></i>编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
			<i class="layui-icon layui-icon-close"></i>删除</a>
		<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="viewLog">
			<i class="layui-icon layui-icon-read"></i>查看拜访记录</a>
	</script>
</div>

</body>
</html>